<template>
    <div class="customer-info">
        <el-row :gutter="40" style="margin-bottom: 20px;">
            <el-col :span="12">
                <el-button size="small" type="primary" @click="editHandle()">新增</el-button>
                <el-button size="small" type="danger" @click="deleHandle()">删除</el-button>
            </el-col>
            <el-col :span="12" class="text-right">
                <el-input v-model="where.company_name" placeholder="请输入公司名称" style="width: 200px; margin-right: 10px;"
                          size="mini"></el-input>
                <el-input v-model="where.mobile" placeholder="请输入手机号" style="width: 200px; margin-right: 10px;"
                          size="mini"></el-input>
                <el-input v-model="where.customer_service" placeholder="请输入客服名称" style="width: 200px; margin-right: 10px;"
                          size="mini"></el-input>
                <el-button size="mini" type="primary" @click="search()">搜索</el-button>
            </el-col>
        </el-row>

        <el-tabs type="border-card">
            <el-tab-pane label="客户基本信息">
                <el-table
                        ref="multipleTable"
                        :data="tableData"
                        tooltip-effect="dark"
                        style="width: 100%"
                        border
                        @selection-change="handleSelectionChange">
                    <el-table-column
                            type="selection"
                            width="55">
                    </el-table-column>
                    <el-table-column
                            prop="company_name"
                            label="公司名称"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="customer_name"
                            label="客户姓名"
                            width="120">
                    </el-table-column>
                    <el-table-column
                            prop="mobile"
                            label="手机号码"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="cooperation_time"
                            label="合作时间"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="payment_method_str"
                            label="付款方式"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="online_time"
                            label="上线时间"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="is_invoice"
                            label="是否开发票"
							:formatter="stateFormat"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="客户网址"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
						   <span @click="gosss(scope.row.url)">{{scope.row.url}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="status_str"
                            label="服务状态"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="customer_service"
                            label="客服"
                            show-overflow-tooltip>
                    </el-table-column>
                    <el-table-column
                            prop="address"
                            label="操作"
                            show-overflow-tooltip>
                        <template slot-scope="scope">
                            <el-button type="primary" @click="editHandle(scope.row.id)" size="mini">编辑</el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页 -->
                <div class="custom-pagination">
                    <el-pagination background layout="prev, pager, next,sizes" :total="total"
                                   @current-change="pageChange"
                                   @size-change="handleSizeChange"
                                   :page-size="where.limit"
                                   :page-sizes="[10, 20, 50, 100]">
                    </el-pagination>
                </div>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
    export default {
        name: "index",
        data() {
            return {
                page: 1, // 当前页码
                pagesize: 10, // 当前条数
                total: 0, // 总条数
                tableData: [],
                multipleSelection: [],
				where:{
					page:1,
					limit:10,
					company_name:'',
					mobile:'',
					customer_service:''
				}
            }
        },
		mounted() {
			this.get_list();
		},
        methods: {
			gosss(url){
				window.location.href =url;
			},
			stateFormat(row, column) {
				
			    if (row[column.property] == 0) {
			      return '九天科技普票'
			    } else if (row[column.property] == 1) {
			      return '九天科技专票'
			    } else if (row[column.property] == 2) {
			      return '九天服务普票'
			    } else if (row[column.property] == 3) {
			      return '九天服务专票'
			    } else if (row[column.property] == 4) {
			      return '不开票'
			    }
				} ,
			get_list(){
				this.$http.post("customers/lists",this.where).then((response) => {
					this.total=response.data.total;
					this.tableData=response.data.records; 
					
				})
			},
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            editHandle(id) {
                let path = id ? '/customer-info-edit?id=' + id : '/customer-info-edit';
                this.$router.push({
                    path: path
                })
            },
            deleHandle() {
				if (this.multipleSelection.length > 0) {
                this.$confirm('确认删除当前数据, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
					var ids=[];
					this.multipleSelection.map(res=>{
								ids.push(res.id)
					})
					this.$http.post("customers/del",{id:ids}).then((response) => {
					if (response.code === 1) {
					    this.$message({
					        type: 'success',
					        message: '删除成功'
					    })
					    this.where.page = 1;
					   this.get_list();
					} else {
					    this.$message({
					        type: 'error',
					        message: response.msg
					    })
					}
					
				})
                }).catch(() => {
                    console.log('取消退出');
                });
				}
            },
            pageChange(page) {
                this.where.page = page;
               this.get_list();
            },
			search() {
				 this.where.page=1;
				this.get_list();
			},
            handleSizeChange(val) {
               
                this.where.limit = val;
				this.get_list();
            },
        }
    }
</script>

<style scoped lang="scss">
    .customer-info {
        background-color: #ffffff;
        overflow-x: hidden;
        padding-top: 16px;

        .leo {
            color: #333333;
        }

        .goal {
            line-height: 64px;
            font-size: 18px;
            font-weight: bold;
        }
    }
</style>